<template>
  <main>
    <div class="secrch">
      <h3>猜你喜欢</h3>
      <ul>
        <!-- <li :class="{active:ssIndex == index}" @click="{navClick(index)}" v-for="(item,index) in nav1" :key="index">{{item.name}}</li> -->
        <li>综合排序</li>
        <li @click="fn2()">距离最近</li>
        <li @click="fn3()">销量最高</li>
        <li>筛选</li>
      </ul>
      <ol>
        <li v-for="(item, index) in nav2" :key="index">{{ item.name }}</li>
      </ol>
    </div>
    <div class="content">
      <div class="main" v-for="(item, index) in list" :key="index">
        <div class="left">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="right">
          <h4>{{ item.name }}</h4>
          <p>4.4 月消费{{ item.monthSalesTip}}</p>
          <div class="center">
            <span>{{ item.shippingFeeTip}}</span>
            <span>{{ item.distance }}</span>
          </div>
          <div class="buttom">
            <span>35减12</span>
            <span>70减30</span>
            <span>150减50</span>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import piclist from "../assets/1.jpg";
import {shop_list} from "../utils/api.js";
export default {
 
  data() {
    return {
      ssIndex: 0,
      list: [
        // {pic:piclist,name:'金百万烤鸭（苏家店）',yuexiao:'500',peisong:'5',qk:3.5,},
        // {pic:piclist,name:'金百万烤鸭（苏家店）',yuexiao:'3',peisong:'5',qk:2.5,},
        // {pic:piclist,name:'金百万烤鸭（苏家店）',yuexiao:'67',peisong:'5',qk:1.1,},
        // {pic:piclist,name:'金百万烤鸭（苏家店）',yuexiao:'900',peisong:'5',qk:2.3,},
        // {pic:piclist,name:'金百万烤鸭（苏家店）',yuexiao:'1299',peisong:'5',qk:3.1,},
        // {pic:piclist,name:'金百万烤鸭（苏家店）',yuexiao:'299',peisong:'5',qk:2.8,},
        // {pic:piclist,name:'金百万烤鸭（苏家店）',yuexiao:'35',peisong:'5',qk:1.5,},
      ],
      // nav1:[
      //   {name:'综合排序'},
      //   {name:'距离最近'},
      //   {name:'销量最高'},
      //   {name:'筛选'},
      // ],
      nav2: [
        { name: "年货节热卖" },
        { name: "京贴联盟" },
        { name: "消减优惠" },
        { name: "吃货联盟" },
      ],
    };
  },
  mounted() {
    shop_list({}).then((res) => {
      console.log(res.data);
      this.list = res.data.list;
    });
  },
  methods: {
    navClick(index) {
      return (this.ssIndex = index);
    },
    // 距离最近排序，小到大
    fn(pro) {
      console.log(pro);
      return function (a, b) {
        var value1 = a[pro];
        var value2 = b[pro];
        return value1 - value2;
      };
    },
    fn2(data) {
      // return this.list.sort(this.fn("distance"));
    },

    // 销量最高排序，大到小
    fng(pro) {
      return function (a, b) {
        var value1 = a[pro];
        var value2 = b[pro];
        return value2 - value1;
      };
    },
    fn3(item) {
      return this.list.sort(this.fng("monthSalesTip"));
    },
  },
};
</script>

<style scoped>
.content {
  overflow: auto;
  width: 100%;
  height: 520px;
  /* background-color: antiquewhite; */
  box-sizing: border-box;
}
.content .main {
  margin: 10px auto;
  display: flex;
  /* border: 1px solid gainsboro; */
  /* background-color: aqua; */
  height: 120px;
  width: 414px;
  box-sizing: border-box;
}

.content .main .left {
  width: 100px;
}
.content .left img {
  width: 100%;
}
.content .main .right {
  padding: 0 5px;
  width: 314px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* background-color: red; */
}
.content .main .right .center {
  display: flex;
  width: 95%;
  justify-content: space-between;
}
.content .main .right .buttom span {
  border: 1px solid rgb(255, 132, 0);
  color: rgb(255, 132, 0);
  margin-right: 8px;
}
.scarch {
  width: 100%;
  height: 100px;
}
h3 {
  margin-left: 10px;
  height: 30px;
}
ul,
ol {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
ul li {
  text-align: center;
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  color: rgb(60, 60, 60);
}
ol li {
  background-color: rgb(214, 214, 214);
  padding: 3px 5px;
}
ul li.active {
  color: black;
}
</style>